<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<go-top :scrollTop="scrollTop"></go-top>
		<navigator open-type="reLaunch" url="/pages/index/index" class="iconfont icon-zhuye gohome" hover-class="none">
		</navigator>
		<view class="topbacks">
			<!-- <u-swiper :list="banner" mode="number" height="785" @click="showimg" indicator-pos="bottomRight"
				border-radius="0"></u-swiper> -->
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" circular
				indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FFFFFF" style="height: 100%;"
				@change="swiperchange">

				<swiper-item v-for="(item,index) in banner">
					<image class="img" :src="item" mode="aspectFill" style="z-index: 100;"></image>
				</swiper-item>
				<swiper-item v-if="detail.video_path.length>0">
					<video class="video" play-btn-position="center" id="myVideo" :src="detail.video_path[0]"
						v-show="show_video" style="z-index: 1;"></video>
				</swiper-item>
			</swiper>
		</view>
		<view class="shopsinfo">
			<view class="shopsmain">
				<view class="infos">
					<view class="infos_price" v-if="detail.money=='0.00'&&detail.intervalPrice=='0.00'">电话询价</view>
					<view class="infos_price" v-else>
						<text class="_1">￥</text>{{detail.spec_type==1?detail.money:detail.intervalPrice}}
						<text class="_2">/{{detail.unit}}</text>
					</view>

					<text class="infosname">{{detail.title}}</text>
				</view>
				<view class="selectbox" @click="savecollection(detail.is_collect)">
					<u-icon :name="detail.is_collect?'heart-fill':'heart'"
						:color="detail.is_collect?'#F89935':'#333333'" size="44"></u-icon>
					<text>{{detail.is_collect?'已收藏':'收藏'}}</text>
				</view>
				<label class="sharebox" @click="sharegood">
					<!-- <button open-type="share"></button> -->
					<u-icon name="zhuanfa" color="#333333" size="44"></u-icon>
					<text class="share">分享</text>
				</label>
			</view>
			<view class="shopsadd">
				<text>{{detail.city}}</text>
				<!-- <text class="distance">距离88km</text> -->
			</view>
		</view>
		<view class="salesbox">
			<text>{{detail.view}} 人查看</text>
			<text>销量 {{detail.sales}}</text>
			<text>库存 {{detail.stock}}</text>
		</view>
		<view class="metionsbox">
			<image src="../../static/img/protect.png" mode="aspectFill"></image>
			<view class="metions">
				<text class="title">安全交易提醒</text>
				<text class="content">微信私下转账风险高，线上交易平台更有保障！</text>
			</view>
		</view>
		<view class="comettitles">
			<text>评价({{detail.comment_num}})</text>
			<navigator :url="'/home/index/allcomet?id='+id" hover-class="none" class="cometrights">
				<text>查看全部</text>
				<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
			</navigator>
		</view>
		<block v-if="detail.comment.length>0">
			<block v-for="(item,index) in detail.comment" :key="index">
				<view class="cometone" :style="index==2?'border:none':''" v-if="index<2">
					<view class="cometinfo">
						<image :src="item.avatar" mode="aspectFill"></image>
						<view class="infos">
							<text class="infosname">{{item.nickname}}</text>
							<text class="time">{{item.createtime}}</text>
						</view>
						<u-rate active-color="#FF9F3B" inactive-color="#b2b2b2" :count="item.level" v-model="stars"
							:disabled="true" gutter="10"></u-rate>
					</view>
					<view class="comet_coment clamp3">{{item.content}}</view>
					<!-- <text class="shopssku">产品规格</text> -->
					<view class="photobox" v-if="item.images.length>0">
						<u-row gutter="12">
							<u-col span="4" v-for="(items,indexs) in item.images" :key="indexs">
								<image :src="items" mode="aspectFill" @click="$plug.showImg(item.images,items)"></image>
							</u-col>
						</u-row>
					</view>
				</view>
			</block>
		</block>
		<!-- <view class="not_more" v-if="detail.comment.length<1">
			<image src="../../static/img/wxiaoxi.png" mode="widthFix"></image>
			<view class="text">暂无评论</view>
		</view> -->

		<view class="shops_information">
			<view class="shops_shop">
				<navigator :url="'/home/station/stationpage?id='+detail.shop.client_uid" hover-class="none"
					open-type="redirect">
					<image :src="detail.shop.image" mode="aspectFill" class="shops_storeimg"></image>
				</navigator>

				<view class="namedes">
					<navigator :url="'/home/station/stationpage?id='+detail.shop.client_uid" hover-class="none"
						open-type="redirect">
						<view class="flex_align">
							<text>{{detail.shop.shop_name}}</text>
						</view>
						<view class="xinyong_box">
							<image :src="detail.shop.mimage" v-if="detail.shop.mimage" mode="heightFix"></image>
							<view class="xin">信</view>
							<view class="xin_number">{{detail.shop.credit_value}}</view>
							<view class="shiming" v-if="detail.shop.realname">实</view>
							<view class="qiye" v-if="detail.shop.enterprise">企</view>
						</view>
					</navigator>
					<view @click="attention" :class="detail.shop.is_follow==1?'attention opt':'attention'">
						{{detail.shop.is_follow==1?'已关注':'+ 关注'}}
					</view>
				</view>
				<!-- <view class="shops_time">经营时间 {{detail.shop.businesstime}}</view> -->
			</view>
		</view>



		<view class="info_content">
			<text>参数</text>
			<view class="spec" v-if="detail.spceArray">
				<view class="tr" v-for="(item,index) in detail.spceArray" :key="index">
					<view class="td">{{item.title}}</view>
					<view class="td">{{item.val}}</view>
				</view>
			</view>
			<text>详情</text>
			<view class="richbox">
				<block v-if="detail.video_path[0]">
					<video class="video" :src="detail.video_path[0]" controls></video>
				</block>
				<block v-for="(item,index) in banner" :key="index">
					<image @click="showimg(index)" :src="item" mode="widthFix"></image>
				</block>
			</view>
		</view>
		<view class="shopcarbox">
			<view class="detail_btn" @click="dialing">
				<text class="iconfont icon-dianhua1"></text>
				<text class="detail_btn_title">联系卖家</text>
			</view>
			<view class="detail_btn" @click="sharegood">
				<!-- <button open-type="share"></button> -->
				<text class="iconfont icon-zhuanfa">
					<u-icon name="share" color="#999999" size="40"></u-icon>
				</text>
				<text class="detail_btn_title">分享</text>
				
				<!-- <text class="share">分享</text> -->
			</view>
			<view class="detail_btn" @click="chat" v-if="detail.shop.client_uid!=client_uid">
				<text class="iconfont icon-dilanxianxingiconyihuifu_huabanfuben"></text>
				<text class="detail_btn_title">聊一聊</text>
			</view>
			<view class="operation">
				<view class="orderbtn" @click="goorderlooks" v-if="detail.is_browse==2">预约看货</view>
				<view class="limitbtn" @click="dialing">立即询价
				</view>

				<!-- <view class="limitbtn" v-if="detail.money=='0.00'&&detail.intervalPrice=='0.00'" @click="dialing">立即询价
				</view>
				<view class="limitbtn" v-else @click="golimitbuy">立即购买</view> -->
			</view>
		</view>

		<u-popup v-model="show_buy" mode="bottom" length="70%" border-radius="14" @close="close">
			<view class="popup">
				<view class="flex_bet_align">
					<image class="goodsImg" :src="sku_showimg" @click="showimg"></image>
					<view style="flex:1;">
						<view class="price">￥{{sku_price}}</view>
						<view class="choosen" v-if="sku_choose">已选：{{sku_choose}}</view>
						<view class="choosen">库存：{{sku_stock}}</view>
					</view>
					<view class="icon popup_icon">
						<u-icon name="close" size="36" color="#000000" @click="closeModal"></u-icon>
						<!-- <view class="iconshanchu2 icon" @click="closeModal"></view> -->
						<!-- <uicon name="close-circle-fill" size="36" color="#000000" @click="closeModal"></uicon> -->
					</view>
				</view>
				<!-- <view class="history">
					上次购买的衣服尺码：S码
				</view>
				<view class="logistics flex_bet_align" v-if="type=='add'">
					<view class="name">物流说明</view>
					<uicon name="more-dot-fill" color="#999999" size="36"></uicon>
				</view>
				<view class="color">
					<view class="name">颜色分类</view>
					<view class="gallery">
						<view v-for="item in 3">
							<image></image>
							<view class="sku clamp1">【白色+棕色】兔耳朵</view>
						</view>
					</view>
				</view> -->
				<scroll-view scroll-y="auto" style="max-height: 560rpx;">
					<block v-if="Object.keys(specData).length">
						<view class="size" v-for="(value,key) in specData" :key="key">
							<view class="name">{{key}}</view>
							<view class="flex_align " style="flex-wrap: wrap;" v-if="key!='颜色'">
								<view class="item" :class="item.can_choose?item.choose?'chooseon':'':'nocan'"
									v-for="(item,index) in value" :key="index"
									@click="item.can_choose?choosethis(key,index,item.id):''">{{item.value}}</view>
							</view>
							<view class="flex_align " style="flex-wrap: wrap;" v-else>
								<view class="item_img"
									:class="item.can_choose?item.choose?'chooseon_img':'':'nocan_img'"
									v-for="(item,index) in value" :key="index"
									@click="item.can_choose?choosethis(key,index,item.id):''">
									<image :src="item.image" mode="widthFix" :title="item.value"></image>
									{{item.value}}
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="size" v-for="(item,index) in skuData" :key="index">
							<view class="name">规格</view>
							<view class="flex_align " style="flex-wrap: wrap;">
								<view class="item chooseon">{{item.spec_value}}</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<!-- 	<view class="number flex_bet_align">
					<view class="name">数量</view>
					<view class="flex_align">
						<view class="stock" v-if="sku_stock==0">暂无库存</view>
						<view class="stock" v-if="sku_stock<=2">仅剩{{sku_stock}}{{detail.unit}}</view>
						<view class="stock" v-else>库存充足</view>
						 <u-number-box v-model="shopnum" :min="1" :max="sku_stock"></u-number-box> 
					</view>
				</view> -->
				<view class="btn" @click="limitbuys()">确定</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	var _this, shak;
	export default {
		data() {
			return {
				settingdata: {
					name: '详情',
					bgColor: 'transparent',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "supplydetail"
				},
				id: 0,
				stars: 5,
				// 回到头部按钮距离
				scrollTop: 0,
				// 详情
				detail: {
					comment: [],
					video_path: [],
					shop: {}
				},
				banner: [],
				// 获取自己的id
				client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0,

				sweixin: '',
				imp: '/static/tiaozhuan.html',

				sku_showimg: "",
				sku_price: "",
				sku_choose: "",
				sku_stock: 0,
				show_buy: false,
				specData: [{
					value: 1
				}],
				skuData: [],
				select_sku_id: [],
				spec_type: 1,
				show_type: 1,
				shopnum: 1,

				indicatorDots: true,
				autoplay: false,

				show_video: true, //由于video层级过高,会遮住规格弹框,设置此参数控制视频是否显示
			}
		},
		onLoad(options) {
			_this = this
			_this.id = options.id
			_this.getdata()

		},
		onShow() {
			this.show_buy = false
		},
		//监听页面滚动
		onPageScroll(res) {
			if (res.scrollTop >= 120) {
				_this.settingdata.bgColor = "#ffffff"
			} else {
				_this.settingdata.bgColor = "transparent"
			}
			this.scrollTop = res.scrollTop
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			_this.getdata()
		},
		methods: {
			swiperchange(e) {
				if (uni.createVideoContext('myVideo')) {
					let videoContext = uni.createVideoContext('myVideo')
					videoContext.stop()
				}
			},
			closeModal() {
				this.show_buy = false
				this.show_video = true
			},
			// 弹出层关闭事件
			close(e) {
				if (!this.show_buy) {
					this.show_video = true
				}
			},
			// 获取数据
			getdata() {
				_this.$api.get("goodsdetails", {
					id: _this.id,
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : ""
				}).then(data => {
					_this.detail = data
					let spceArray = []
					for (let item in data.spce) {
						spceArray.push({
							"title": item,
							val: data.spce[item]
						})
					}
					_this.skuData = data.sku
					for (let key in data.spec) {
						data.spec[key].map(item => {
							item.choose = false
							item.can_choose = true
						})
					}
					// _this.sku_unique = data.sku[0].sku_unique
					_this.specData = data.spec
					_this.spec_type = data.spec_type
					_this.sku_showimg = data.images[0]
					_this.sku_price = data.money
					_this.sku_stock = data.stock
					_this.detail.spceArray = spceArray
					_this.banner = data.images

					console.log(_this.banner)
				});
			},

			showimg(index) {
				console.log(index)
				_this.$plug.showImg(_this.banner, _this.banner[index])
			},
			// 收藏
			savecollection(is_collect) {
				_this.click_shake(() => {
					_this.$api.islogin(() => {
						_this.$api.post("savecollection", {
							type_: 2,
							collect_id: _this.id
						}).then(data => {
							_this.detail.is_collect = !_this.detail.is_collect
						});
					})
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
			// 跳转到预约看货
			goorderlooks() {
				this.show_type = 2
				this.show_buy = true
			},
			// 跳转到立即购买
			golimitbuy() {
				this.show_type = 1
				this.show_buy = true
				this.show_video = false
				let sku_id = ''
				let if_v = this.select_sku_id.every((item) => {
					return item == -1
				})
				if (if_v) {
					this.skuData.some((item) => {
						if (item.stock > 0) {
							this.select_sku_id = item.value_id.split(',')
							this.select_sku_id.splice(this.select_sku_id.length - 1)
							sku_id = item.value_id.split(',')
							this.checkItem()
							return true
						}
					})
				}
				if (_this.specData) {
					let name = Object.keys(_this.specData)
					name.map(item => {
						_this.specData[item].forEach((items, index) => {
							sku_id.forEach(itema => {
								if (itema == items.id) {
									_this.specData[item][index].choose = true
								}
							})

						})
					})
					_this.$forceUpdate()
					_this.checked()
				}
			},
			// 弹框确认
			limitbuys() {
				console.log(123)
				_this.click_shake(() => {
					_this.$api.islogin(() => {
						if (Object.keys(_this.specData).length) {
							let chooseArray = []
							for (let key in _this.specData) {
								_this.specData[key].map(item => {
									if (item.choose) {
										chooseArray.push(item.id)
									}
								})
							}

							let sku_unique, cansend = false;
							if (chooseArray.length == Object.keys(_this.specData).length && chooseArray
								.length != 0) {
								for (let i = 0; i < _this.skuData.length; i++) {
									if (_this.skuData[i].value_id == chooseArray.toString()) {
										sku_unique = _this.skuData[i].sku_unique
										cansend = true
									}
								}
								if (cansend) {
									if (this.show_type == 1) {
										uni.navigateTo({
											url: '/home/index/limitbuy?id=' + _this.id +
												'&sku_unique=' + sku_unique
										})

									} else {
										uni.navigateTo({
											url: '/home/index/orderlooks?id=' + _this.id +
												'&sku_unique=' + sku_unique
										})
									}
								} else {
									console.log(405)
									uni.showToast({
										icon: "none",
										title: "请选择规格"
									})
								}
							} else {
								console.log(417)
								uni.showToast({
									icon: "none",
									title: "请选择规格"
								})
							}

						} else {
							let sku_unique = _this.skuData[0].sku_unique
							if (this.show_type == 1) {
								uni.navigateTo({
									url: '/home/index/limitbuy?id=' + _this.id +
										'&sku_unique=' + sku_unique
								})

							} else {
								uni.navigateTo({
									url: '/home/index/orderlooks?id=' + _this.id +
										'&sku_unique=' + sku_unique
								})
							}
						}


					})
				})
			},
			//拨号并记录
			// dialing() {
			// 	_this.$api.post("calllog", {
			// 		calllog_uid: _this.detail.shop.client_uid,
			// 		call_type: 1
			// 	}).then(data => {
			// 		_this.$plug.dialing(_this.detail.shop.mobile)
			// 	});
			// },
			//拨号并记录
			dialing() {
				_this.$api.get("getshopcalll",{
					id: _this.detail.id
				}).then(mobile => {
					console.log(mobile);
					_this.$plug.dialing(mobile || _this.detail.shop.mobile)
				})
				
			},

			// 跳转到聊天
			chat() {
				console.log(_this.detail)
				wx.setStorageSync('list', _this.detail)
				uni.navigateTo({
					url: '../../chat/chatingroom?type=5' + '&member_type=1'
				})
			},
			checkItem() {
				var self = this;
				var option = self.specData;
				var result = []; //定义数组存储被选中的值
				let x = 0;
				for (var i in option) {
					result[x] = self.select_sku_id[x] ? self.select_sku_id[x] : '';
					x++
				}
				console.log(result)
				let y = 0;
				for (var i in option) {
					var last = result[y]; //把选中的值存放到字符串last去
					for (var k in option[i]) {
						result[y] = option[i][k].id; //赋值，存在直接覆盖，不存在往里面添加name值
						option[i][k].can_choose = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[y] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
					y++
				}
				self.$forceUpdate(); //重绘
			},
			// 查看是否还有库存
			isMay(result) {
				for (var i in result) {
					if (result[i] == '') {
						return true; //如果数组里有为空的值，那直接返回true
					}
				}
				var res = result.join(',');
				console.log(result)
				let isture = this.skuData.some((item) => {
					if (item.value_id == res) {
						return item.stock == 0 ? false : true;
					}
				})

				return isture //匹配选中的数据的库存，若不为空返回true反之返回false

			},
			// 选择规格
			choosethis(_key, _index, id) {

				_this.specData[_key].map(item => {
					item.choose = false
				})
				let name = Object.keys(_this.specData)
				name.forEach((item, index) => {
					if (_key == item) {
						this.select_sku_id[index] = id
					} else {
						this.select_sku_id[index] = ''
					}
				})
				_this.specData[_key][_index].choose = true
				this.checkItem()
				_this.$forceUpdate()
				_this.checked()
				console.log(this.select_sku_id)
			},
			// 选择规格
			checked() {
				let chooseArray = []
				for (let key in _this.specData) {
					_this.specData[key].map(item => {
						if (item.choose) {
							chooseArray.push(item.id)
						}
					})
				}
				if (chooseArray.length == Object.keys(_this.specData).length) {
					_this.skuData.map(item => {
						if (item.value_id == chooseArray.toString()) {
							_this.sku_showimg = item.image
							_this.sku_choose = item.spec_value
							_this.sku_price = item.money
							_this.sku_stock = item.stock
						}
					})
				}
			},
			attention() {
				_this.$api.islogin(() => {
					_this.$api.get("savefollow", {
						select_type: 1,
						types: 3,
						id: _this.detail.shop.client_uid
					}).then(data => {
						console.log(this.detail)
						_this.detail.shop.is_follow = _this.detail.shop.is_follow == 0 ? 1 : 0
						//如果点击了关注,刷新上个页面的关注信息
						// wx.setStorageSync('index_onShow', true)
					});
				})
			},

			sharegood() {
				console.log(111111, _this.detail.images[0])
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession", //分享到聊天界面
					type: 5,
					imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
					title: 'app分享'+_this.detail.title,
					miniProgram: {
						id: 'gh_57154cd1b0ae', //微信小程序原始id
						path: "/home/index/supplydetail?id=" + _this.id, //点击链接进入的页面
						type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						webUrl: '/pages/index/index' //兼容低版本的网页链接
					},
					success: res => {
						console.log(JSON.stringify(res));
					},
					fail(err) {
						console.log("分享失败",err)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbacks {
		height: 785rpx;
		width: 100%;

		.img {
			width: 100%;
			height: 100%;
		}

		.video {
			width: 100%;
			height: 100%;
		}

	}

	.gohome {
		width: 80rpx;
		line-height: 80rpx;
		background-color: rgba(56, 192, 140, 0.6);
		color: #FFFFFF;
		text-align: center;
		border-radius: 50%;
		position: fixed;
		left: 50rpx;
		bottom: calc(env(safe-area-inset-bottom) + 120rpx);
		z-index: 80;
	}

	.shopsinfo {
		margin: 0 25rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid #e6e6e6;

		.shopsmain {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-top: 55rpx;

			.infos {
				display: flex;
				flex-direction: column;
				width: 500rpx;

				.infos_price {
					font-size: 37rpx;
					font-weight: bold;
					color: #F73F3F;
					display: flex;
					flex-direction: row;
					align-items: center;

					._1 {
						font-size: 30rpx;
					}

					._2 {
						font-size: 27rpx;
					}
				}

				.infosname {
					margin-top: 22rpx;
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.selectbox {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100rpx;
				flex: 1;

				text {
					margin-top: 17rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}

			.sharebox {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100rpx;
				flex: 1;

				.iconfont {
					font-size: 40rpx;
					color: #333333;
				}

				.share {
					margin-top: 17rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}
		}

		.shopsadd {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 56rpx;

			text {
				color: #999999;
				font-size: 24rpx;
			}

			.distance {
				margin-left: 55rpx;
			}
		}
	}

	.salesbox {
		padding: 26rpx 25rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		text {
			color: #999999;
			font-size: 24rpx;
		}
	}

	.metionsbox {
		margin: 2rpx 25rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 35rpx 40rpx 31rpx 40rpx;
		background-color: #D7F2E8;
		border: 4rpx;

		image {
			width: 75rpx;
			height: 83rpx;
		}

		.metions {
			flex: 1;
			margin-left: 26rpx;
			display: flex;
			flex-direction: column;

			.title {
				color: #38BE8C;
				font-size: 32rpx;
				font-weight: bold;
			}

			.content {
				margin-top: 12rpx;
				color: #7BD9B6;
				font-size: 22rpx;
			}
		}
	}

	.comettitles {
		padding: 44rpx 0 34rpx 0;
		margin: 0 25rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 4rpx solid #E6E6E6;

		text {
			color: #333333;
			font-size: 32rpx;
		}

		.cometrights {
			display: flex;
			flex-direction: row;
			align-items: center;

			text {
				color: #999999;
				font-size: 24rpx;
				margin-right: 13rpx;
			}
		}
	}

	.cometone {
		margin: 0 25rpx;
		border-bottom: 2rpx solid #E6E6E6;
		padding: 30rpx 12rpx 35rpx 0;
		display: flex;
		flex-direction: column;

		.cometinfo {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				width: 78rpx;
				height: 78rpx;
				border-radius: 50%;
			}

			.infos {
				margin-left: 12rpx;
				display: flex;
				flex-direction: column;
				flex: 1;

				.infosname {
					color: #333333;
					font-size: 30rpx;
				}

				.time {
					margin-top: 16rpx;
					color: #999999;
					font-size: 20rpx;
				}
			}
		}

		.comet_coment {
			margin-top: 37rpx;
			color: #333333;
			font-size: 28rpx;
		}

		.shopssku {
			margin-top: 23rpx;
			color: #999999;
			font-size: 20rpx;
		}

		.photobox {
			margin-top: 32rpx;

			image {
				width: 220rpx;
				height: 220rpx;
				border-radius: 5rpx;
			}
		}
	}

	.shops_information {
		padding: 34rpx 28rpx 37rpx 28rpx;
		border-top: 8rpx solid #E6E6E6;
		border-bottom: 8rpx solid #E6E6E6;

		.shops_storeimg {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		.shops_shop {
			flex: 1;
			display: flex;

			.namedes {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				margin-left: 19rpx;

				text {
					color: #333333;
					font-size: 32rpx;
					max-width: 340rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				image {
					width: auto;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.attention {
					width: 107rpx;
					height: 50rpx;
					background: #38be8c;
					border-radius: 25rpx;
					text-align: center;
					line-height: 48rpx;
					border: 1rpx solid #38be8c;
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.xinyong_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 8rpx;

					.xin {
						width: 30rpx;
						height: 30rpx;
						background: #00C575;
						border-radius: 3px 0 0 3rpx;
						text-align: center;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
					}

					.xin_number {
						background-color: #fff;
						border: 2rpx solid #00C575;
						border-radius: 0 3rpx 3rpx 0;
						color: #00C575;
						font-size: 20rpx;
						text-align: center;
						height: 30rpx;
						line-height: 30rpx;
						min-width: 50rpx;
						text-align: center;
					}
				}
			}

			.shops_time {
				margin-top: 19rpx;
				color: #999999;
				font-size: 22rpx;
			}
		}
	}

	.info_content {
		padding: 60rpx 0 98rpx 0;
		padding: 60rpx 0 calc(env(safe-area-inset-bottom) + 98rpx) 0;
		display: flex;
		flex-direction: column;

		text {
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 25rpx;
		}

		.spec {
			width: 690rpx;
			margin: 20rpx auto;
			border: 1rpx solid #e6e6e6;
			margin-top: 20rpx;

			.tr {
				border-bottom: 1rpx solid #e6e6e6;
				display: flex;

				&:last-child {
					border-bottom: none;
				}
			}

			.td {
				min-width: 200rpx;
				line-height: 48rpx;
				font-size: 26rpx;
				padding: 0 26rpx;

				&:last-child {
					border-left: 1rpx solid #e6e6e6;
				}
			}
		}

		.richbox {
			margin-top: 50rpx;
			display: inline-block;
			padding: 0 20rpx;

			image {
				width: 100%;
				float: left;
				margin: 0 0 20rpx;
			}

			.video {
				width: 100%;
			}
		}
	}

	.shopcarbox {
		height: 98rpx;
		height: calc(env(safe-area-inset-bottom) + 98rpx);
		padding-right: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #fff;
		box-shadow: 0 4rpx 16rpx 0 rgba(184, 179, 179, 0.25);
		position: fixed;
		bottom: 0;
		width: 100%;

		.detail_btn {
			margin-left: 44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.iconfont {
				font-size: 38rpx;
				color: #666666;
			}

			.detail_btn_title {
				margin-top: 7rpx;
				font-size: 20rpx;
				color: #666666;
			}
		}

		.operation {
			flex: 1;
			display: flex;
			border-radius: 37rpx;
			overflow: hidden;
			height: 74rpx;
			justify-content: space-around;
			margin-left: 44rpx;
		}

		.orderbtn {
			height: 74rpx;
			width: 100%;
			background: #F89935;
			text-align: center;
			line-height: 74rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}

		.limitbtn {
			height: 74rpx;
			width: 100%;
			background: #38BE8C;
			text-align: center;
			line-height: 74rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.popup {
		padding: 40rpx 30rpx;
		font-size: 28rpx;
		position: relative;
		width: 100%;

		.rich {
			rich-text {

				img {
					width: 100%;
				}
			}
		}


		.iconshanchu2 {
			// font-size: ;
			background-color: #f2f2f2;
			color: #a5a5a5;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 18rpx;
			border-radius: 50%;
		}

		.popup_icon .icon {
			padding: 0;
		}

		.sbu {
			width: 690rpx;
			height: 90rpx;
			background-color: #F92028;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			position: fixed;
			left: 50%;
			margin-left: -345rpx;
			bottom: 0;

		}

		.iconguanbi {
			font-size: 40rpx;
			padding: 0;
		}

		.title {
			font-size: 32rpx;
			text-align: center;
			color: #222222;
		}

		.rowCan {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			.leftcan {
				width: 80px;
				// text-align: justify;
				display: inline-block;
				height: 38rpx;
				color: #999999;

				&:after {
					content: '';
					width: 100%;
					display: inline-block;
					overflow: hidden;
					height: 0;
				}
			}

			.rightcan {
				margin-left: 20rpx;
				color: #222222;
				flex: 1;
			}
		}

		.rowCan:last-child {
			border: none;
		}

		.name {
			color: #333333;
			margin: 20rpx 0;
		}

		.score {
			font-size: 28rpx;
			color: #999999;

			.icon {
				font-size: 28rpx;
			}
		}

		.tags {
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 24rpx;

			text {
				display: inline-block;
				width: 76rpx;
				height: 30rpx;
				background: #ffffff;
				border: 1rpx solid #e60718;
				border-radius: 17rpx;
				font-size: 20rpx;
				text-align: center;
				line-height: 28rpx;
				color: #E60718;
				margin-right: 24rpx;
			}
		}

		.btn {
			width: 690rpx;
			height: 100rpx;
			background: linear-gradient(to right, #36BE8E, #07ADB9);
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 100rpx;
			margin-top: 32rpx;
			position: fixed;
			bottom: 40rpx;
		}

		.msg {
			min-height: 100rpx;
			width: 690rpx;
			margin: 0 auto;
			background-color: #F2F2F2;
			font-size: 24rpx;
			color: #999999;
			padding: 26rpx 36rpx;
		}

		.coupon {
			width: 688rpx;
			height: 180rpx;
			margin: 20rpx auto 0rpx;
			background: #FFFFFF;
			position: relative;
			border: 1rpx solid #EEEEEE;

			.left {
				width: 184rpx;
				height: 100%;
				font-size: 22rpx;
				color: #E60718;
				text-align: center;
				position: relative;
				border-right: 2rpx dashed #eeeeee;

				text {
					font-size: 76rpx;
					font-family: DIN Pro;
				}

				.type {
					width: 92rpx;
					height: 34rpx;
					margin: 10rpx auto;
					background: #e60718;
					border-radius: 12rpx;
					font-size: 20rpx;
					font-weight: 500;
					text-align: center;
					color: #ffffff;
				}
			}

			.left::after {
				content: ' ';
				width: 30rpx;
				height: 30rpx;
				background-color: #fafafa;
				border-radius: 15rpx;
				border-bottom: 1rpx solid #EEEEEE;
				position: absolute;
				top: -15rpx;
				right: -15rpx;
			}

			.right {
				flex: 1;
				padding-left: 30rpx;
				position: relative;

				.condition {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				.tag {
					width: 68rpx;
					height: 68rpx;
				}

				.date {
					font-size: 20rpx;
					font-weight: 500;
					color: #999999;
					margin: 6rpx 0 30rpx;
				}

				.rules {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;

					text {
						margin: 0 10rpx;
					}
				}
			}

			.right:before {
				content: ' ';
				width: 30rpx;
				height: 30rpx;
				background-color: #fafafa;
				border-radius: 15rpx;
				border-top: 1rpx solid #EEEEEE;
				position: absolute;
				bottom: -35rpx;
				left: -15rpx;
			}

			.new {
				width: 155rpx;
				height: 100%;
				background-color: #E60718;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				padding-top: 50rpx;
			}

			.used {
				width: 155rpx;
				height: 100%;
				background-color: #C8CBCC;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				padding-top: 50rpx;
			}
		}



		.coupon::after {
			content: ' ';
			width: 0;
			height: 100%;
			position: absolute;
			border-right: 15rpx dotted #FAFAFA;
			right: -6rpx;
			top: 0rpx;
		}

		.wrap {
			margin-top: 62rpx;
			font-size: 24rpx;
			color: #999999;
			padding-bottom: 30rpx;

			.item {
				margin-bottom: 24rpx;

				.tag {
					width: 76rpx;
					height: 30rpx;
					border: 1rpx solid #e60718;
					border-radius: 17rpx;
					color: #e60718;
					font-size: 20rpx;
					text-align: center;
					line-height: 30rpx;
					margin-right: 24rpx;
				}

				.text {
					margin-bottom: 8rpx;
				}

				.suite {
					margin-bottom: 24rpx;
				}
			}

		}

		.goodsImg {
			width: 152rpx;
			height: 152rpx;
			background: #333333;
			margin-right: 22rpx;
		}

		.price {
			font-size: 40rpx;
			font-family: DIN Pro, DIN Pro-Medium;
			font-weight: 500;
			color: #fa4238;
			line-height: 42rpx;
			margin-bottom: 14rpx;
		}

		.choosen {
			font-size: 24rpx;
			color: #999999;
		}

		.icon {
			padding-bottom: 100rpx;
		}

		.history {
			width: 690rpx;
			height: 60rpx;
			background: #fafafa;
			border-radius: 16rpx;
			padding-left: 16rpx;
			color: #999999;
			font-size: 14rpx;
			line-height: 60rpx;
			margin-top: 14rpx;
		}

		.color {
			padding: 29rpx 0;
			border-top: 1rpx solid #FAFAFA;
			border-bottom: 1rpx solid #FAFAFA;

			.name {
				color: #333333;
			}

			.gallery {
				display: grid;
				grid-template-columns: repeat(3, 33.33%);

				image {
					width: 220rpx;
					height: 220rpx;
					background-color: #EEEEEE;
				}

				.sku {
					width: 216rpx;
					height: 60rpx;
					background: #fafafa;
					border-radius: 10rpx;
					font-size: 18rpx;
					color: #999999;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}

		.size {
			padding: 19rpx 0 25rpx;



			.name {
				color: #333333;
			}

			.item {
				min-width: 200rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 10rpx;
				background: #fafafa;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #333333;
				margin: 10rpx 30rpx 10rpx 0;


			}

			.item_img {
				width: 106rpx;
				min-height: 106rpx;
				padding: 2rpx;
				border: 1rpx solid #FFFFFF;
				margin: 0 10rpx;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
					min-height: 50px;
				}
			}

			.chooseon {
				// color: #fff;
				// background-color: #e60718;
				border: 1rpx solid #e60718;
				color: #e60718;

			}

			.chooseon_img {
				border: 1rpx solid #e60718;
				color: #e60718;
			}


			.nocan_img {
				background-color: #ccc;
				opacity: .4;
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(100%);
			}

			.nocan {
				background-color: #ccc;
				opacity: .4;
				color: #000;
				pointer-events: none;
			}
		}

		.size:last-child {
			border-bottom: 1rpx solid #FAFAFA;
		}

		.number {
			padding: 0 0 130rpx;

			.name {
				color: #333333;
			}

			.stock {
				font-size: 24rpx;
				color: #E60718;
				margin-right: 20rpx;
			}
		}

		.logistics {
			.name {
				color: #333333;
			}
		}

		.tips {
			width: 602rpx;
			margin: 32rpx auto;
			font-size: 24rpx;
			text-align: center;
			color: #999999;
		}

		.progress {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.confirm {
			width: 690rpx;
			height: 90rpx;
			margin-top: 300rpx;
			background: #e60718;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
		}
	}
</style>
